<template>
    <div class='shopping'>
        <ul class="ul">
            <li v-for="item in shoplist" :key="item.product_id">
                <van-image :src="item.product_picture">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
                <span>{{item.product_name}}</span>
                <hr>
                <span>￥:{{item.product_price}}元</span>
                <p>{{item.product_intro}}</p>
                <p>
                <i
                  class="el-icon-shopping-cart-1"
                  style="font-size:30px;"
                  @click="add(item)"
                ></i>
                <i
                  class="el-icon-star-off"
                  style="font-size:30px;"
                  @click="like(item)"
                ></i>
                </p>
            </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from 'vant';
    export default {
        props:["shoplist"],
        data() {
            return {
            };
        },
        mounted() {
            // this.$axios
            //     .post("/product/getHotProduct", {
            //         categoryName: ["电视机", "空调", "洗衣机", "保护套"],
            //     }).then((res) => {
            //         console.log(res)
            //         this.list = res.data.Product
            //         console.log(this.list)
            //     })
        },
        methods: {
            add(item){
                this.$store.commit("add",item)
                Toast('成功添加至购物车！');
            },
            like(item){
                this.$store.commit("like",item)
                Toast('成功添加至收藏！');
            }
        },
    };
</script>

<style lang='scss'>
    .ul {
        // margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        li {
            border: 1px solid rgb(215, 218, 221);
            width: 24%;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            margin: 4px;
            // background-color: rgb(238, 238, 238);
            transition-duration: 0.3s;
            img{
                width: 80%;
                margin: 0 auto;
            }
        }

        li:hover {
            -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;
        }
    }
</style>